<template>
	<view class="order-detail">
		<u-navbar :is-back="false" title="">
			<view class="slot-wrap ortitle" @click="fanh">
				<u-icon name="arrow-left" size="35"></u-icon>
				<text v-if="type==1">{{order_detail.status_text}}</text>
				<view v-if="type==2">
					<text v-if="order_detail.status==1">待发货</text>
					<text v-if="order_detail.status==2">待收货</text>
					<text v-if="order_detail.status==3">已完成</text>
				</view>

			</view>
		</u-navbar>
		<!-- <view class="material-flow-box mb10">
			<u-time-line>
				<u-time-line-item nodeTop="2">
					<template v-slot:node>
						<image style="width: 20rpx;height: 20rpx;" src="../../../static/my/start_ellipse.png" mode="">
						</image>
					</template>
					<template v-slot:content>
						<view class="">
							<view class="space-between mb8">
								<view class="flex align-c">
									<view class="fz17 bold mr8">
										运输中
									</view>
									<view class="fz12">
										06-25 04:22
									</view>
								</view>
								<view class="fz13 material-flow-detail" @click="checkMaterialFlow">
									详细信息>
								</view>
							</view>
							<view class="fz12">
								<text>已离开 </text>
								北京分拨交付中心；发往华北海淀区牡丹园公司
							</view>
						</view>
					</template>
				</u-time-line-item>
				<u-time-line-item>
					<template v-slot:node>
						<image style="width: 20rpx;height: 20rpx;" src="goodsimage_text" mode="">
						</image>
					</template>
					<template v-slot:content>
						<view class="">
							<view class="fz17 bold mb8">
								送至金成时代广场9号楼
							</view>
							<view class="fz12">
								才先生 139****2990
							</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view> -->
		<view class="goods-info-box mb10">
			<view class="goods-info flex mb30">
				<image class="mr10" :src="order_detail.goodsimage_text" mode=""></image>
				<view class="goods-description-box">
					<view class="fz13 bold mb10">
						{{order_detail.goodsname}}
					</view>
					<view class="c6 space-between fz13">
						<view class="">
							规格：{{order_detail.spec}}
						</view>
						<view class="">
							x{{order_detail.number}}
						</view>
					</view>
				</view>
			</view>
			<view class="c6 fz15">
				<view class="order-line space-between">
					<view class="">
						实付款
					</view>
					<block v-if="type==1">
						<view class="c-d22119">
							<text>{{order_detail.totalmoney}}</text>
							<text class="fz12">金币+</text>
							<text>{{order_detail.totalscore}}</text>
							<text class="fz12">积分</text>
						</view>
					</block>
					<!-- type类型:0=入金订单,1=抢购订单，入金订单需要把totalscore拆成两份，300拆为150企业产权+150金币，
						 抢购订单不需要拆分，直接显示300健康值 -->
					<block v-if="type==2">
						<text class="c-d22119 " v-if="order_detail.type==0">
							{{order_detail.totalscore|xiaos2}}
							<text class="fz12 normal">企业产权+</text>
							{{order_detail.totalscore|xiaos2}}
							<text class="fz12 normal">金币</text>
						</text>
						<text class="c-d22119" v-if="order_detail.type==1">
							{{order_detail.totalscore|xiaos}}
							<text class="fz12 normal">健康值</text>
						</text>
					</block>
				</view>
				<view class="order-line space-between">
					<view class="">
						配送服务
					</view>
					<view class="" v-if="order_detail.type==0">
						快递包邮
					</view>
					<view class="" v-if="order_detail.type==1">
						10金币
					</view>
				</view>
				<view class="order-line space-between">
					<view class="">
						订单编号
					</view>
					<view class="">
						{{order_detail.totalordernum}}
					</view>
				</view>
			</view>
		</view>
		<view class="controls-btn-box flex align-c">
			<!-- <u-button @click.stop="clickControls(order_detail.id)" throttle-time='3000' v-if="order_detail.status== 0"
				class="material-flow-btn">去支付</u-button> -->
			<u-button @click.stop="cuif()" throttle-time='3000' v-if="order_detail.status == 1"
				class="material-flow-btn">催发货</u-button>
			<!-- <u-button @click.stop="checkMaterialFlow()" throttle-time='3000'
				v-if="order_detail.status == 2 || order_detail.status == 3" class="material-flow-btn">查看物流</u-button> -->
			<u-button @click.stop="notarizeReceiveGoods" throttle-time='3000' v-if="order_detail.status == 2"
				class="receive-goods-btn">确认收货</u-button>
		</view>
		<u-popup v-model="show" mode="center" width="600rpx" height="560rpx" border-radius="20">
			<view class="pop">
				<view class="pop-title" @click="close">
					<u-icon name="close" size="40"></u-icon>
					<text>请输入支付密码</text>
				</view>
				<view class="title-des">{{order_detail.goodsname}}</view>
				<view class="swiper-mouay">
					<text>{{order_detail.totalmoney|xiaos}}</text>
					<text>金币+</text>
					<text>{{order_detail.totalscore|xiaos}}</text>
					<text>积分</text>
				</view>
				<view class="pop-number">
					<view class="">
						<text>支付方式</text>
						<text>金币+积分支付</text>
					</view>
					<u-message-input mode="box" :maxlength="6" font-size="35" width="60"
						@finish="finish"></u-message-input>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		orderDetail,
		doDrder,
		doOrders,
		orderDetails
	} from '@/network/api.js'
	export default {
		data() {
			return {
				// 订单详情id
				id: '',
				// 判断直购/抢购详情页,1直购，2抢购
				type: '',
				// 弹框
				show: false,
				order_detail: {}
			}
		},
		onLoad(option) {
			let data = JSON.parse(option.data)
			this.id = data.ids
			this.type = data.type
			console.log(data, '订单详情')
			if (this.type == 1) {
				this.dingdx()
			} else {
				this.qdingd()
			}
		},
		filters: {
			// 过滤小数点后面数据
			xiaos2(num) {
				return Math.trunc(num) / 2
			},
			xiaos(num) {
				return Math.trunc(num)
			},
		},
		methods: {
			// 支付
			clickControls() {
				this.show = true
			},
			// 关闭支付弹框
			close() {
				this.show = false
			},
			// 催发货事件
			cuif() {
				uni.showToast({
					title: "已提醒发货",
					icon: "none",
					duration: 2000,
				});
			},
			// 获取直购订单详情数据
			dingdx() {
				let data = {
					id: this.id
				}
				orderDetail(data).then(res => {
					if (res.code == 1) {
						this.order_detail = res.data
					}
				})
			},
			// 获取抢购订单详情数据
			qdingd() {
				let data = {
					id: this.id
				}
				orderDetails(data).then(res => {
					if (res.code == 1) {
						this.order_detail = res.data
					}
				})
			},
			// 查看物流
			checkMaterialFlow() {
				uni.navigateTo({
					url: "/pages/subpackage/my/logisticsDetails"
				});
			},
			// 直购确认收货
			notarizeReceiveGoods(idw) {
				let data = {
					id: this.order_detail.id,
					status: 3
				}
				// type==1直购,2抢买
				if (this.type == 1) {
					doDrder(data).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: "已确认收货",
								icon: "none",
								duration: 2000,
							});
						}
					})
				} else {
					doOrders(data).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: "已确认收货",
								icon: "none",
								duration: 2000,
							});
						}
					})
				}
			},
			fanh() {
				if (this.type == 1) {
					uni.redirectTo({
						url: '/pages/subpackage/my/myOrder'
					})
				} else {
					uni.redirectTo({
						url: '/pages/subpackage/my/qOrder'
					})
				}

			}
		},
	}
</script>

<style lang="scss">
	.order-detail {
		min-height: 100vh;
		background-color: #F3F3F3;
		padding: 20rpx 30rpx 100rpx;
		box-sizing: border-box;

		.ortitle {
			display: flex;
			margin-left: 30rpx;

			>text {
				display: block;
				font-size: 36rpx;
				// margin-bottom: 20rpx;
			}
		}

		.goods-info-box {
			padding: 40rpx 20rpx;
			background-color: #ffffff;
			border-radius: 15rpx;
			box-sizing: border-box;

			.goods-info {
				image {
					width: 150rpx;
					height: 150rpx;
				}

				.goods-description-box {
					width: calc(100vw - 270rpx);
				}
			}

			.order-line {
				height: 92rpx;
				line-height: 92rpx;
				position: relative;
			}

			.order-line::after {
				content: "";
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				width: calc(100vw - 100rpx);
				height: 2rpx;
				background-color: #F5F5F5;
			}

			.order-line:last-child::after {
				content: "";
				background-color: transparent;
			}
		}

		.material-flow-box {
			background-color: #ffffff;
			padding: 30rpx 20rpx 1rpx;
			border-radius: 15rpx;

			.material-flow-detail {
				background: linear-gradient(0deg, #b07412 0%, #e3ba5b 100%);
				font-family: PingFang SC, PingFang SC-Medium;
				color: transparent;
				-webkit-background-clip: text;
			}
		}

		.controls-btn-box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100rpx;
			background-color: #ffffff;
			justify-content: end;
			padding: 0 30rpx;

			.material-flow-btn {
				border: 1rpx solid #CCCCCC !important;
				padding: 0 !important;
				color: #4D4D4D;
				font-size: 26rpx;
				text-align: center;
				width: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				box-sizing: border-box;
				border-radius: 25rpx;
				margin: 0 !important;
			}

			uni-button:after {
				content: " ";
				border: none !important;
			}

			.receive-goods-btn {
				border: none;
				padding: 0 !important;
				background-color: #D22119;
				color: #ffffff;
				font-size: 26rpx;
				text-align: center;
				width: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				box-sizing: border-box;
				border-radius: 25rpx !important;
				margin: 0 0 0 30rpx !important;
			}
		}

		// 弹框
		.pop {
			padding: 57rpx 46rpx;

			.pop-title {
				display: flex;

				.u-icon {
					position: absolute;
				}

				>text {
					margin: 0 auto;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Bold;
				}
			}

			.title-des {
				text-align: center;
				margin: 50rpx 0 34rpx 0;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
			}

			.swiper-mouay {
				text-align: center;
				padding-bottom: 46rpx;
				color: #E80000;
				border-bottom: 1rpx solid #EEEEEE;

				>text:nth-child(odd) {
					font-size: 48rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: bold;
				}

				>text:nth-child(even) {
					font-size: 30rpx;
				}
			}

			.pop-number {
				>view:nth-child(1) {
					display: flex;
					justify-content: space-between;
					padding: 30rpx 0;

					>text {
						display: block;
					}
				}
			}
		}
	}
</style>